<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态修改数据</title>
</head>
<body>
	<table align="center" border="1" cellpadding="10">
	<caption><h1>用户信息表</h1></caption>
	<thead>
		<tr>
			<th >姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>邮箱</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody id="tb">
		<tr>
			<td>张三</td>
			<td>22</td>
			<td>男</td>
			<td>123@www.com</td>
			<td><input type="button" value="删除"  id="btn1"></td>
		</tr>
	</tbody>
	 <tfoot align="right">
	 	<tr>
	 		<td colspan="5">
	 		<input type="button" value="删除首行" id="firstlist">
			<input type="button" value="删除末行" id="endlist"></td>
	 	</tr>
	 </tfoot> 
</table>
<hr/>
<form  align="center">
	<fieldset>
		<legend><h1>用户注册表</h1></legend>
<p>姓名：<input type="text" name="ursename" id="ursename"></p>
<p>年龄：<input type="text" name="age" id="age"></p>
<p>性别：
	<input type="radio" name="gender" checked value="男" id="male">男
    <input type="radio" name="gender" value="女" id="female">女
</p>
<p>邮箱：<input type="text" name="email" id="email">
</p>
<p><input type="button" id="btn" value="添加数据"></p>
</fieldset>
</form>
</body>
</html>
<script>
	//获取数据的函数
	function $(id){
		return document.getElementById(id)
	}
    //创建td的函数
    function c(ele){
    	return document.createElement(ele)
    }

    var tb=$('tb');
	var btn1=$('btn1');//获取btn1
	btn1.onclick=function(){
	$('tb').removeChild(this.parentNode.parentNode);
	}
	var firstlist=$('firstlist');
	firstlist.onclick=function(){
		$('tb').removeChild(tb.children[0]);
	}
	var endlist=$('endlist');
	endlist.onclick=function(){
		$('tb').removeChild(tb.children[tb.children.length-1]);
	}
	var btn=document.getElementById('btn');//获取按钮
	btn.onclick=function(){//点击按钮时要发生的事件；
        //获取用户输入的数据；
   		var ursename= $('ursename').value;
		var age = $('age').value;
		var gender = $('male').checked? $('male').value:$('female').value;
		var email=$('email').value;
		//创建存放数据tr;

		
		var tdName=c('td');
		var tdAge=c('td');
		var tdgender=c('td');
		var tdemail=c('td');

		tdName.innerText=ursename;
		tdAge.innerText=age;
		tdgender.innerText=gender;
		tdemail.innerText=email;
      
       // 创建删除td和按钮并绑定删除功能
			var tdDel = c('td');//创建td
			var delBtn = c('input');
			delBtn.type = 'button';
			delBtn.value = '删除';
			delBtn.onclick = function(){
				// this代表了事件的触发源
				$('tb').removeChild(this.parentNode.parentNode);
			}
			// 将删除按钮添加到td中
			tdDel.appendChild(delBtn);

           var tr=c('tr');//创建存放数据td
       tr.appendChild(tdName);
       tr.appendChild(tdAge);
       tr.appendChild(tdgender);
       tr.appendChild(tdemail);
       tr.appendChild(tdDel);
       tr.appendChild(btn1);

          $('tb').appendChild(tr);
      
	}
</script>